

import {Component} from '@angular/core'

import {Todo} from './Todo'
import {TodosServer} from './todos.server'

@Component({
  selector: 'my-app',
  //templateUrl: './templates/app.template.html',
  template: `
    <div class="area">
      <h1>Todos</h1>
      <div class="box">
        <div class="top">
          <input type="text" placeholder="please input todo" (keyup.enter)="appendNews(newsTitle.value,newsTitle.value = '')" #newsTitle >
        </div>
        <div class="body">
          <ul class="todos">
            <li *ngFor="let todo of todos" >
              <input type="checkbox" (click)="toggle(todo)"  [(ngModel)]="todo.isDone" (checked)="todo.isDone" />
              <label for="" [class.line-through]="todo.isDone" >{{todo.title}}</label>
            </li>
          </ul>
        </div>
      </div>
      <div class="footer">
       <div class="left">
          {{todos.length - finisheds}}
          {{(todos.length - finisheds) > 1 ? 'items': 'item'}}
          left
       </div>
       <div class="right" *ngIf="finisheds">
          <button (click)="removeDone()">
            clean {{finisheds}} completed {{finisheds > 1 ? 'items' : 'item'}}
          </button>
       </div>
    </div>
    </div>`,

  providers: [TodosServer],
  styles: [`
    h1 {
      text-align: center;
    }
    .area {
      width: 600px;
      margin: 50px auto;
      box-shadow: 0px 0px 5px #ccc;
    }
    .top input {
      display: block;
      width: 90%;
      margin: 0 auto;
      padding: 8px;
    }
    .body {
      margin: 20px 0;
      padding: 10px;
    }
    ul {
      list-style-type:none;
      margin: 0;
      padding: 0;
    }
    ul li {
      margin: 10px 0;
    }
    .footer {
      overflow: hidden;
      clear: both;
      background: #ddd;
      padding: 10px;
    }
    .right {
      float: right;
    }
    .right button {
      background: #ccc;
      border: 1px solid #fff
      border-radius: 4px;
      outline: none;
    }
    .left {
      float: left;
    }
    .line-through {
      text-decoration: line-through;
    }
  `] 
})

export class AppComponent {
  todos:Todo[]
  finisheds:number
  constructor (private todosServer:TodosServer){
    this.todos = this.todosServer.getTodos()
    this.finisheds = this.todos.filter((item:Todo) => item.isDone).length
  }

  toggle (todo) {
    this.finisheds += todo.isDone ? -1 : 1
  }

  appendNews (title) {
    this.todos.push({
      title: title,
      isDone: false
    })
  }

  removeDone () {
    this.todos = this.todos.filter((todo:Todo) => {
      return !todo.isDone
    })
    this.finisheds = 0
  }

}